<template>
	<div class="mainWrapper">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/dataExpress' }">
				<i class="lh fw_300 lh-seller fz_20"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>财务及数据</el-breadcrumb-item>
			<el-breadcrumb-item>人才账单明细</el-breadcrumb-item>
		</el-breadcrumb>

		<div class="content_Box box-shadow">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="3">
						<!-- <el-button type="success" @click="back()" round size="mini">返回</el-button> -->
						<el-button type="default" @click="downloadOrder()" round size="mini">导出明细</el-button>
					</el-col>
					<el-col :span="21">
						<el-form :inline="true" class="form-inline fr">
							<el-form-item>
								<el-input size="mini" class="w_110" v-model="s_staff_name" placeholder="接单人"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input size="mini" class="w_150" v-model="s_task_sn" placeholder="任务编号"></el-input>
							</el-form-item>
							<el-form-item>
								<el-autocomplete
									size="mini"
									class="w_190"
									v-model="s_shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
							<el-form-item>
								<el-select
									size="mini"
									class="w_100"
									v-model="next_type_arr"
									placeholder="岗位"
									@change="changeBtndialogtype_next"
									clearable
								>
									<el-option
										v-for="item in TypeArr"
										:key="item.id"
										:label="item.label_name"
										:value="`${item.id}|${item.label_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" @click="shearchBtn">搜索</el-button>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>

			<div class>
				<template>
					<el-table :data="ticketList" stripe>
						<el-table-column prop="staff_name" label="接单人" width="80" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.staff_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="task_sn" label="手机号" width="120" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.mobile }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="job_name" label="岗位" width="140" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.job_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="task_sn" label="任务编号" width="135" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.task_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="shop_name" label="店铺名称" min-width="170" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.shop_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="demand_sn" label="订单编号" width="135" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.demand_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="adjust_sn" label="调账记录编号" width="135" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.adjust_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="adjust_remark" label="调账记录备注" width="135">
							<template slot-scope="{ row, $index }">
								<span>{{ row.adjust_remark }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="task_sn" label="费用类别" width="135" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.type_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="total_staff" label="金额" width="80" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.total_staff | filterNumber }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="actual_start_time" label="计费开始时间" width="150"></el-table-column>
						<el-table-column prop="actual_end_time" label="计费结束时间" width="150"></el-table-column>
						<el-table-column prop="hour_actual" label="计费时长H" width="80" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.hour_actual }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="amout_staff" label="单价（元/H）" width="180" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.amout_staff }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="staff_name" label="任务状态" width="80" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.status_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="bill_staff_status_name" label="结算状态" width="120" align="center">
							<template slot-scope="{ row, $index }">
								<span class="text-success">{{ row.bill_staff_status_name }}</span>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'

export default {
	name: 'ticketList',
	data() {
		return {
			bill_staff_sn: '',
			dataMes: '',
			ids: '',
			index: '',
			shenhe_status: '',
			message: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			state: [
				{ id: '', name: '状态' },
				{ id: '10', name: '已创建' },
				{ id: '20', name: '已成立' },
				{ id: '30', name: '不成立' },
				{ id: '40', name: '已结算' }
			],
			//搜索对应值
			s_staff_name: '', //被扣罚人
			s_task_sn: '',
			s_shop_id: '', //店铺id
			s_shop_name: '', //店铺名
			ticketList: [], //扣罚列表
			ticketListNext: [],
			next_type_arr: '',
			next_label_id: '',
			next_label_name: '',

			diaTitle: '', //弹框title

			shopList: [], //店铺列表
			TypeArr: '' //岗位列表
		}
	},
	created() {
		//获取账单bill_staff_sn
		this.bill_staff_sn = this.$route.query.bill_staff_sn
		//任务分类
		this.alljob_type()
		this.listTicket()
	},
	mounted() {
		this.listShopList()
	},
	methods: {
		listTicket() {
			//获取用户列表
			let fn = new FormData()
			fn.append('bill_staff_sn', this.bill_staff_sn)

			this.$http.post(this.url + '/bill/payDetail', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							this.ticketList = res.data.data.list
							this.ticketListNext = res.data.data.list
						} else {
							this.ticketList = []
							this.ticketListNext = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		listShopList() {
			//获取商铺列表
			let fn = new FormData()
			fn.append('sign_status', 30) //已合作的店铺
			fn.append('status', 1) //启用的店铺
			// fn.append("search_list", 1); //不进行分页
			this.$http.post(this.url + '/shop/getListForSearch', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.shopList = res.data.data.list
						} else {
							this.shopList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		//标签接口
		alljob_type() {
			let fn = new FormData()
			fn.append('label_type', 'job_type')
			this.$http.post(this.url + '/label/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.TypeArr = res.data.data
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		shearchBtn() {
			// 搜索
			this.ticketList = this.ticketListNext.filter(data => {
				return (
					data['staff_name'].indexOf(this.s_staff_name) > -1 &&
					data['task_sn'].indexOf(this.s_task_sn) > -1 &&
					data['shop_name'].indexOf(this.s_shop_name) > -1 &&
					data['job_name'].indexOf(this.next_label_name) > -1
				)
			})
		},

		resetBtn() {
			//重置
			this.resetData() //重置请求数据
			this.listTicket()
		},

		resetData() {
			//重置请求数据
			this.s_staff_name = ''
			this.s_task_sn = ''
			this.s_shop_id = ''
			this.s_shop_name = ''
			this.next_type_arr = ''
			this.next_label_id = ''
			this.next_label_name = ''
		},

		goMerchantEdit(row) {
			//编辑页面
			this.$router.push({
				path: '/merchantsEdit',
				query: {
					id: row.id
				}
			})
		},

		//返回
		back() {
			this.$router.go(-1)
		},

		goUser(row) {
			this.$router.push({
				path: '/shopUserList',
				query: {
					id: row.id
				}
			})
		},
		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			console.log(item)
			this.s_shop_id = item.id
		},
		changeBtndialogtype_next() {
			let [id, name] = this.next_type_arr.split('|') // es6 数组解构赋值
			this.next_label_id = id
			this.next_label_name = name
		},
		downloadOrder() {
			//平台任务账单-导出
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				bill_staff_sn: this.bill_staff_sn
			}
			let param = $.param(obj)
			window.location.href = this.url + '/bill/exportPayDetail?' + param
		}
	},
	beforeRouteLeave(to, from, next) {
		// 设置下一个路由的 meta
		console.log(to)
		// console.log(from)
		// console.log(next)
		if (to.path == '/staffList') {
			to.meta.keepAlive = true
		}
		next()
	},
	filters: {}
}
</script>

<style scoped>
@import '../../assets/style/ticketlist.css';
</style>



// WEBPACK FOOTER //
// src/components/bill/PayDetail.vue